<template>
  <div class="onlineForm">
    <div class="searchArea">
      <span style="font-size: 13px"> 表名：</span>
      <el-input
        class="nameInput"
        placeholder="请输入表名"
        size="small">
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" size="small" icon="el-icon-refresh-right">重置</el-button>
    </div>

    <div class="actionArea">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">新建表</el-button>
      <el-button type="primary" size="small" @click="showCodeGeneration">生成代码</el-button>
    </div>

    <div class="dataArea">
      <el-table
        :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}"
        :cell-style="{'text-align':'center'}"
        border="border"
        :data="tableList"
        @selection-change="chooseTable"
        size="small"
      >

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="index"
          width="80"
          label="#"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="tableName"
          label="表名"
        >
        </el-table-column>

        <el-table-column
          prop="tableDescribe"
          label="描述"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>

        <el-table-column
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <span style="color:red;" v-if="scope.row.syncStatus===1">未同步</span>
            <span v-else>已同步</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="version"
          label="版本"
          width="80"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editTable(scope.row)" style="margin-right: 10px">编辑</el-button>
            <el-popconfirm
              v-if="scope.row.syncStatus!==2"
              title="确定要同步数据库吗"
              @onConfirm="syncDb(scope.row.id)"
            >
              <el-button slot="reference" type="text" size="small" style="margin-right: 10px" v-if="scope.row.syncStatus!==2">同步</el-button>
            </el-popconfirm>

            <el-popconfirm
              title="确定要删除这张表吗"
              @onConfirm="deleteTable(scope.row.id)"
            >
              <el-button type="text" slot="reference" size="small" style="color: red">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          :page-sizes="[10,20,30,40]"
          :current-page="page.pageNo"
          :page-size="page.pageSize"
          hide-on-single-page
          layout=" total,prev, pager, next,sizes, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>

    <add-table-dialog :show-add-dialog="showAddDialog" @refresh="getAllTables"></add-table-dialog>

    <edit-table-dialog :show-edit-dialog="showEditDialog" :table="table" @refresh="getAllTables"></edit-table-dialog>

    <el-dialog title="生成代码"  :visible.sync="codeGeneration">
      <div class="codeGeneration" >
        <el-form label-width="80px" v-model="codeGenerationTable" label-position="left">
          <el-form-item label="位置">
            <el-row>
              <el-col :span="20">
                <el-input type="text" v-model="codeGenerationTable.position" placeholder="请选择位置"></el-input>
              </el-col>
              <el-col :span="1">
                <el-button icon="el-icon-folder-opened" style="border-radius: 0" type="primary">选择</el-button>

              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="模块说明">
            <el-row>
              <el-col :span="23">
                <el-input type="text" v-model="codeGenerationTable.tableDescribe"  placeholder="请输入模块名"></el-input>
              </el-col>
            </el-row>

          </el-form-item>

          <el-form-item label="表名">
            <el-row>
              <el-col :span="23">
                <el-input type="text" v-model="codeGenerationTable.tableName"  placeholder="请输入表名"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="实体名">
            <el-row>
              <el-col :span="23">
                <el-input v-model="codeGenerationTable.entityName"  placeholder="请输入实体名"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="包名">
            <el-row>
              <el-col :span="23">
                <el-input  v-model="codeGenerationTable.packageName"  placeholder="请输入包名"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-checkbox-group v-model="codeModules" @change="chooseModules">
              <el-row>
                <el-col :span="6">
                  <el-checkbox label="controller"></el-checkbox>
                </el-col>
                <el-col :span="6">
                  <el-checkbox label="service"></el-checkbox>
                </el-col>
                <el-col :span="6">
                  <el-checkbox label="serviceImpl"></el-checkbox>
                </el-col>
                <el-col :span="6">
                  <el-checkbox label="entity"></el-checkbox>
                </el-col>
              </el-row>
              <el-row>

                <el-col :span="6">
                  <el-checkbox label="mapper"></el-checkbox>
                </el-col>
                <el-col :span="6">
                  <el-checkbox label="mapper.xml"></el-checkbox>
                </el-col>
                <el-col :span="6">
                  <el-checkbox label="vue"></el-checkbox>
                </el-col>
                <el-col :span="6">
                  <el-checkbox label="router"></el-checkbox>
                </el-col>
              </el-row>

            </el-checkbox-group>
          </el-form-item>
        </el-form>

        <div style="text-align: center" >
          <el-button type="danger" style="width: 120px" @click="codeGeneration=false">取消</el-button>
          <el-button type="primary" style="width: 120px" @click="createCode(codeGenerationTable)">生成</el-button>
        </div>
      </div>

    </el-dialog>


  </div>
</template>

<script>
import {addTable, codeGenerate, defaultFields, deleteById, fieldTypes, getAllTable, getByName, sync} from "@/api/onlineTable";
import {Message} from "element-ui";
import AddTableDialog from "@/views/online/onlineForm/AddTableDialog.vue";
import EditTableDialog from "@/views/online/onlineForm/EditTableDialog.vue";
import {str2Hump} from "@/utils/stringUtil";

export default {
  name: "onlineForm",
  components: {EditTableDialog, AddTableDialog},
  data() {
    return {
      codeGeneration: false,
      showAddDialog: {show: false},
      showEditDialog: {show: false},
      choosedTable: [],
      tableList: [],
      table: {},
      codeModules: ["controller","service","serviceImpl","entity","mapper","mapper.xml","vue","router"],
      codeGenerationTable:{},
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },

    }
  },
  created() {
    this.getAllTables()
  },
  methods: {
    createCode(table){
      table.codeModules = this.codeModules
      codeGenerate(table).then(res=>{
        if (res.success){
          Message.success("生成成功！");
        }
      }).catch(err=>{
        Message.error(err.msg)
      })

      this.codeGeneration = false
    },
    syncDb(id) {
      sync({id}).then(res => {
        if (res.success) {
          Message.success("同步成功！")
          this.getAllTables()
        }
      })
    },
    chooseModules(val){
    },
    chooseTable(val) {
      this.choosedTable = val
      if (val.length>0){
        this.choosedTable[0].position = 'E:\\workspace'
        let str = str2Hump(this.choosedTable[0].tableName)
        this.choosedTable[0].entityName = str[0].toUpperCase()+str.slice(1);
        this.choosedTable[0].packageName = 'com.admin.boot.modules.'+str
      }

    },
    showCodeGeneration() {
      if (this.choosedTable.length ===1) {
        this.codeGenerationTable = Object.assign({},this.choosedTable[0])
        if (this.codeGenerationTable.syncStatus===2){
          this.codeGeneration = true
        }else {
          Message.warning("请先同步数据库！");
        }

      } else {
        Message.warning("请选择一条数据")
      }
    },

    deleteTable(id) {
      deleteById({id: id}).then(res => {
        if (res.success) {
          Message.success("删除成功！");
          this.getAllTables()
        }
      })
    },
    editTable(data) {
      this.showEditDialog = {show: true}
      this.table = Object.assign({}, data)
    },

    openAddDialog() {
      this.showAddDialog = {show: true}
    },
    getAllTables() {
      let data = {
        ...this.page
      }
      getAllTable(data).then(res => {
        if (res.success) {
          this.tableList = res.result.records
          this.page.pageNo = res.result.current
          this.page.pageSize = res.result.size
          this.page.total = res.result.total
        }
      })
    },


  },
}
</script>


<style scoped lang="scss">
.onlineForm {
  padding: 20px;

  .dataArea {
    margin-top: 20px;

    .page {
      text-align: center;
      margin-top: 20px;
    }
  }

  .actionArea {
    margin-top: 20px;
  }

  .searchArea {
    .nameInput {
      margin-right: 20px;
      width: 180px;
    }
  }


}

</style>

<style>
.searchArea .el-button {
  border-radius: 0;
}

.actionArea .el-button {
  border-radius: 0;
}

.nameInput input {
  border-radius: 0;
}

.describeInput input {
  border-radius: 0;
}

.codeGeneration input {
  border-radius: 0;
}
.codeGeneration .el-button{
  border-radius: 0;
}


</style>
